<template>
  <div class="container">
    <!--搜索-->
    <div class="search_news">
      <el-row>
        <el-col :span="6">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          报告类型：
          <el-select v-model="queryParams.reportType" clearable placeholder="请选择报告类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          报告标题：
          <el-input
          style="width: 70%;"
            placeholder="请输入报告标题"
            v-model="queryParams.reportTheme"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="8">
          报告时间：
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">
              <el-button type="primary" @click="search">&nbsp;查 找&nbsp;</el-button>
            </el-col>
            <el-col :span="12">
              <el-button plain @click="reset">&nbsp;重 置&nbsp;</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!--左侧-->
    <div v-loading="loadingStatus">
      <div class="list_left">
        <span style="padding: 0 10px; font-size: 18px; font-weight: bold;">分析报告:</span>
        <ul class="infinite-list">
          <li v-for="(item, index) in newsList" :key="index" @click="displayPage(item)" class="infinite-list-item">
            <div class="orange-square">&nbsp;&nbsp;&nbsp;{{ item.reportTheme }}</div>
          </li>
        </ul>
        <!--底部分页-->
        <div class="page_class">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="queryParams.pageNum"
            :page-size="9"
            layout="total, prev, pager, next"
            :total="totalPage">
          </el-pagination>
        </div>
      </div>
      <!--右侧--> 
      <div class="content_right">
        <!-- <div> -->
          <div class="content_title" >
            <h3>{{ this.reportInfo.reportTheme }}</h3>
          </div>
          <div class="content_time_partment"   v-show="this.reportInfo == null ? false : true">
            发布时间：{{ this.reportInfo.createTime }} &nbsp; 来源：{{ this.reportInfo.issueBy }}
          </div>
          <div class="content_html" ref="addScript" v-html="this.reportInfo.reportContent"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {reportList} from '@/api/home'
import {formatDate} from '@/utils/index'
import store from '@/store'
export default {
  name: 'report',
  data() {
    return {
      options: [{
          value: '0',
          label: '周分析报告'
        }, {
          value: '1',
          label: '月分析报告'
        }, {
          value: '2',
          label: '季度分析报告'
        }],
      queryParams: {
        pageNum: 1,
        pageSize: 9,
        reportTheme: null,
        reportType: null,
        startTime: null,
        endTime: null
      },
      totalPage: 0,
      timeValue: null,
      newsList: [],
      reportInfo: {},
      toPageItem: store.getters.reportItem.reportItem,
      loadingStatus: true
    };
  },
  created() {
    this.getData()
  },
  methods: {
    getData(item) {
      this.loadingStatus = true
      reportList(this.queryParams).then(res => {
        this.totalPage = res.total
        this.newsList = res.rows
        if (this.newsList.length <= 0) {
          this.loadingStatus = false
          this.reportInfo = {}
          return ;
        }
        if (this.toPageItem != null) {
          this.reportInfo = this.toPageItem
          store.commit('setReport', null)
        } else {
          this.reportInfo = this.newsList[0]
        }
        this.reportInfo.reportContent = this.addScript(this.reportInfo.reportContent)
        this.loadingStatus = false
      })
    },
    // 动态增加script标签
    addScript(content) {
      /**
       * 主要用于解决传来的html使用v-html无法渲染script的问题
       * 解决思想：
       *   1. 在v-html的div中重新加入<script>标签，并填入内容
       *   2. 填入的内容为传来的html中的<script>标签内容（正则匹配传来的内容，复制到新创建的中）
       *   3. 再创建一个<script>标签将远程连接的echarts5.4.3.js（stp3 应在 stp2 前面 ， js从上往下解析，反了会报错找不到echarts）
       */
      let script = document.createElement("script");
      script.src = 'http://47.92.118.35:9000/imges/echarts5.4.3.js';
      this.$refs.addScript.append(script);
      // 延迟新增
      this.$nextTick(() => {
        // js
        let regJs = "";
        content.replace(/<script.*?>([\s\S]+?)<\/script>/gim, (_, js) => {
          // 正则匹配出script中的内容
          regJs = js ;
          let script = document.createElement("script");
          script.innerHTML = regJs;
          this.$refs.addScript.append(script);
        });
      });
      return content;
    },
    search() {
      if (this.timeValue != null) {
        const [startTime, endTime] = this.timeValue
        this.queryParams.startTime = formatDate(startTime)
        this.queryParams.endTime = formatDate(endTime) 
      }
      this.getData()
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 9,
        informationTheme: null,
        reportType: null,
        startTime: null,
        endTime: null
      }
      this.timeValue = null
      this.getData()
    },
    displayPage(item) {
      this.reportInfo = item
      this.reportInfo.reportContent = this.addScript(this.reportInfo.reportContent)
    },
    handleCurrentChange(item) {
      this.queryParams.pageNum = item
      this.getData()
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 600px;
}
.page_class {
  width: 100%;
  height: 50px;
}
.search_news {
  margin: 10px 0;
}
.list_left {
  float: left;
  width: 30%;
  height: 600px;
  margin: 20px 1%;
  border: 2px solid green;
  border-radius: 20px;;
  position: relative;/* 首先为父容器设置相对定位 */
}
.content_right {
  float: right;
  width: 62%;
  height: 600px;
  margin: 20px 1%;
  padding: 0 1.5%;
  border: 2px solid green;
  border-radius: 20px;
}
.content_title {
  width: 100%;
  height: 8%;
  margin: 10px 0;
  display: flex; /* 设置为 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.content_time_partment {
  width: 100%;
  height: 5%;
  display: flex; /* 设置为 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.content_html {
  width: 100%;
  height: 80%;
  margin: 10px 0;
  overflow: scroll;
} 
.page_class {
  width: 100%;
  position: absolute;
  bottom: -10px;
  /* 可能还需要设置left/right属性以控制水平方向的位置 */
  left: auto; /* 如果希望从左侧开始对齐 */
  right: auto; /* 如果希望从右侧开始对齐，同时需要设置margin-left:auto和margin-right:auto来实现居中 */
}

.orange-square {
  width: 6px; /* 正方形边长 */
  height: 6px; /* 正方形边长 */
  background-color: orange; /* 橙色背景 */
  display: inline-block; /* 可选，使其与其他元素并排显示 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */
}
.infinite-list {
  padding: 0 20px;
}
.infinite-list-item {
  height: 50px;
  margin: 10px 0 ;

  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */

  font-size: 16px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  white-space: nowrap; /* 不换行 */
  overflow: hidden;    /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  background-color: rgb(254, 251, 251);
}
.infinite-list-item:hover {
  cursor: pointer;
}
</style>